<template>
    <div>
        <div style="line-height: 30px;margin-bottom: 4px;background-color: #ffffff;font-size: 18px;padding: 10px 30px 10px 30px">
            文档管理
            <!--            <el-button type="primary" style="float: right; padding: 5px 15px!important;margin-top: 4px" icon="el-icon-edit"></el-button>-->
        </div>
        <div>
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 文档</el-breadcrumb-item>
                    <!--                    <el-breadcrumb-item>编辑器</el-breadcrumb-item>-->
                </el-breadcrumb>
            </div>
            <div class="container">
                <div class="plugins-tips">
                    已发布的文档
                </div>
                <el-card class="box-card" v-for="o in fileList">
                    <div slot="header" class="clearfix">
                        <span>{{o.fileTitle}}@{{o.projectName}}</span>
                        <p class="file_preview_time">{{o.uploadTime}}</p>
                        <el-button style="float: right;" type="primary" @click="showDetail(o.fileId)">查看详情
                        </el-button>
                        <el-button v-if="o.fileId!==0" style="float: right; margin-right: 10px" type="danger"
                                   @click="delDialogVisible = true">删除
                        </el-button>
                        <el-dialog
                                title="提示"
                                :visible.sync="delDialogVisible"
                                width="30%">
                            <span>是否确认删除该公告？</span>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="delDialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="fileRemove(o.fileId)">确 定</el-button>
                            </span>
                        </el-dialog>
                    </div>
                    <p class="file_preview">{{o.uploaderName}}</p>
                </el-card>
                <div>
                    <div class="plugins-tips">
                        编写文档
                    </div>
                </div>
                <el-input class="title_input" placeholder="请输入文档标题" v-model="postData.fileTitle">
                </el-input>
                <quill-editor ref="myTextEditor" v-model="postData.fileContent" :options="editorOption"></quill-editor>
                <el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
            </div>
        </div>
        <!--        文档详情展示-->
        <el-drawer
                :visible.sync="drawer"
                :title="current.fileTitle"
                style="outline: none"
                size="50%">
            <el-col class="file_detail">
                <div class="file_detail_tips">
                    {{current.uploadTime}}
                </div>
                <el-container style="height: 75vh;overflow: scroll">
                    <div v-html="current.fileContent">
                    </div>
                </el-container>

            </el-col>
        </el-drawer>
    </div>
</template>

<script>
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import { quillEditor } from 'vue-quill-editor';
    import { filePost, fileRemove, fileShow, fileShowList } from '../../../api/project/file';
    import { dateConvert } from '../../../utils/date';

    export default {
        // name: 'editor',
        data: function() {
            return {
                delDialogVisible: false,
                current: {
                    fileTitle: '文档标题',
                    fileContent: '<p>加载中...</p>'
                },
                fileList: [{
                    fileId: '0',
                    uploaderName: '*',
                    projectName: '*',
                    fileTitle: '',
                    uploadTime: '2020-08-08'
                }],
                postData: {
                    fileTitle: '',
                    fileContent: ''
                },
                drawer: false,
                editorOption: {
                    placeholder: '在此输入文档内容'
                }
            };
        },
        computed: {
            getText: function() {
                return this.current.fileContent.replace(/<[^>]+>/g, '');
            }
        },
        components: {
            quillEditor
        },
        created() {

        },
        mounted() {
            this.getFileList();
        },
        methods: {
            // 获取文档列表请求
            getFileList() {
                fileShowList({ projectId: this.$route.query.projectId }).then(res => {
                    if (res.data.length > 0) {
                        res.data.forEach((item, index) => {
                            res.data[index].uploadTime = dateConvert(item.uploadTime);
                        });
                        this.fileList = res.data;
                    } else {
                        this.fileList = [{
                            fileId: 0,
                            uploaderName: '暂无文档',
                            projectName: '',
                            fileTitle: '',
                            uploadTime: ''
                        }];
                    }
                });
            },
            // 获取文档详情请求
            getFileDetail(id) {
                fileShow({ fileId: id }).then(res => {
                    if (res.data) {
                        res.data.uploadTime = dateConvert(res.data.uploadTime);
                        this.current = res.data;
                    }
                });
            },
            // 删除文档请求
            fileRemove(id) {
                this.delDialogVisible = false;
                fileRemove({ fileId: id }).then(res => {
                    this.$message.success({
                        title: '删除成功！',
                        duration: 1000,
                        onClose: location.reload()
                    });
                });
            },
            showDetail(id) {
                if (parseInt(id) === 0) return this.$message.warning('未上传文档');
                this.drawer = true;
                this.getFileDetail(id);
            },
            onEditorChange({ editor, html, text }) {
                this.content = html;
            },
            submit() {
                let data = this.postData;
                data['projectId'] = this.$route.query.projectId;
                filePost(data).then(res => {
                    if (res)
                        this.$message.success({
                            title: '提交成功！',
                            duration: 1000,
                            onClose: location.reload()
                        });
                });
            }
        }
    };
</script>

<style>
    .el-row {
        margin-bottom: 20px;
    }

    .file_detail h1 {
        font-size: 2em;
    }

    .file_detail_tips {
        display: block;
        background: #eef1f6;
        padding: 10px;
        margin-bottom: 10px;
    }

    .title_input {
        margin-bottom: 20px;
        height: 30px;
    }

    .el-drawer__header > :first-child {
        outline: none;
        font-size: 2rem;
    }

    #el-drawer__title span {
        outline: none;
    }

    .el-drawer__header span {
        outline: none;
    }

    .el-drawer rtl {
        outline: none;
    }

    .file_detail {
        padding: 20px;
    }

    .grid-content {
        font-size: 16px;
        display: flex;
        align-items: center;
        height: 35px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
    }

    .grid-num {
        font-size: 14px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 40px;
        width: 40px;
        height: 40px;
        text-align: center;
        color: #fff;
    }

    .file_preview {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        text-emphasis: red;
        /*ellipse: */
    }

    .file_preview_time {
        color: #909399;
    }

    /*.grid-con-1 .grid-con-icon {*/
    /*    font-size: 14px;*/
    /*    color:  #FFD700;*/
    /*}*/

    .grid-con-1 .grid-num {
        color: #FFD700
    }

    /*.grid-con-2 .grid-con-icon {*/
    /*    background: rgb(100, 213, 114);*/
    /*}*/

    .grid-con-2 .grid-num {
        color: rgb(100, 213, 114);
    }

    /*.grid-con-3 .grid-con-icon {*/
    /*    font-size: 14px;*/
    /*    color: #2d8cf0;*/
    /*    !*background: rgb(242, 94, 67);*!*/
    /*}*/

    .grid-con-3 .grid-num {
        color: rgb(45, 140, 240);
    }

    .user-info-cont div:first-child {
        font-size: 15px;
        color: #222;
    }


    .user-info-list span {
        margin-left: 70px;
    }

    .box-card {
        margin-bottom: 20px;
    }

</style>
